<template>
    <div class="register">
        <el-row class="w100 h100 " type="flex" justify="end">
            <div class="register-content">
                <el-row class="h100" type="flex" justify="center" align="middle">
                    <div class="format-content">
                        <!-- 表单 -->
                        <!-- model获取整个表单的值，必填项 -->
                        <!-- 如果要对表单进行校验，rules必填,prop必填 -->
                        <el-form ref="registerFormRef" :model="registerForm" label-width="100px" label-position="top"
                            :rules="registerFormRules" hide-required-asterisk>
                            <el-form-item>
                                <template #label>
                                    <h2 style="color: #409EFF;">学生管理系统 | 注册</h2>
                                </template>
                            </el-form-item>
                            <el-form-item prop="userName">
                                <template #label>
                                    <div class="label-row">
                                        <span style="color: red;width: 10px;height: 10px;">*</span>
                                        <span :class="['label', { active: registerFormActive.userName }]">账号</span>
                                        <span :class="['placeholder', { active: registerFormActive.userName }]"
                                            @click="registerLabelClick('userName')">账号</span>
                                    </div>
                                </template>
                                <el-input ref="userNameRef" v-model="registerForm.userName"
                                    @focus="registerInpotFocus('userName')" @blur="registerInpotBlur('userName')"
                                    prefix-icon="el-icon-user"></el-input>
                            </el-form-item>
                            <el-form-item prop="realName">
                                <template #label>
                                    <div class="label-row">
                                        <span style="color: red;width: 10px;height: 10px;">*</span>
                                        <span :class="['label', { active: registerFormActive.realName }]">姓名</span>
                                        <span :class="['placeholder', { active: registerFormActive.realName }]"
                                            @click="registerLabelClick('realName')">姓名</span>
                                    </div>
                                </template>
                                <el-input ref="nameRef" v-model="registerForm.realName"
                                    @focus="registerInpotFocus('realName')" @blur="registerInpotBlur('realName')"
                                    prefix-icon="el-icon-user"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <template #label>
                                    <div class="label-row">
                                        <span style="color: red;width: 10px;height: 10px; margin-left: 5px;">*</span>
                                        <span :class="['label', { active: registerFormActive.password }]">密码</span>
                                        <span :class="['placeholder', { active: registerFormActive.password }]"
                                            @click="registerLabelClick('password')">密码</span>
                                    </div>
                                </template>
                                <el-input ref="passwordRef" v-model="registerForm.password"
                                    @focus="registerInpotFocus('password')" @blur="registerInpotBlur('password')"
                                    prefix-icon="el-icon-view"></el-input>
                            </el-form-item>
                            <el-form-item prop="confirmPassword">
                                <template #label>
                                    <div class="label-row">
                                        <span style="color: red;width: 10px;height: 10px;">*</span>
                                        <span
                                            :class="['label', { active: registerFormActive.confirmPassword }]">确认密码</span>
                                        <span :class="['placeholder', { active: registerFormActive.confirmPassword }]"
                                            @click="registerLabelClick('confirmPassword')">确认密码</span>
                                    </div>
                                </template>
                                <el-input ref="confirmPasswordRef" v-model="registerForm.confirmPassword"
                                    @focus="registerInpotFocus('confirmPassword')"
                                    @blur="registerInpotBlur('confirmPassword')" prefix-icon="el-icon-view"></el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <template #label>
                                    <div class="label-row">
                                        <span style="color: red;width: 10px;height: 10px;">*</span>
                                        <span :class="['label', { active: registerFormActive.code }]">验证码</span>
                                        <span :class="['placeholder', { active: registerFormActive.code }]"
                                            style="top: 60px;" @click="registerLabelClick('code')">验证码</span>
                                    </div>
                                </template>
                                <el-row type="flex" justify="space-between" align="middle">
                                    <el-input ref="codeRef" v-model="registerForm.code"
                                        @focus="registerInpotFocus('code')" @blur="registerInpotBlur('code')"
                                        prefix-icon="el-icon-picture" style="width: 50%; ">
                                    </el-input>
                                    <div v-html="captchaImageInfo.captchaImage" style="cursor: pointer;"
                                        @click="getCaptchaImage"></div>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-row type="flex" justify="space-between">
                                    <el-button type="primary" @click="handleregister">注册</el-button>
                                    <div>已有账号<el-button type="text">
                                            <router-link to="/login" tag="span">立即登录</router-link>
                                        </el-button></div>
                                </el-row>


                            </el-form-item>
                        </el-form>
                    </div>
                </el-row>

            </div>
        </el-row>

    </div>
</template>
<script>
import { Message } from 'element-ui'
import { register } from '@/api/user.js'
import { captchaImage } from '@/api/common.js'
import { cookie, setToken } from '@/utils/cookie.js'
export default {
    name: 'Register',
    data() {
        // 密码一致性验证规则
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            }
            else if (!/^[A-Za-z0-9]{6,15}$/.test(value)) {
                callback(new Error('密码格式不正确'));
            }
            else {
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            // 表单
            registerForm: {
                userName: undefined,
                realName: undefined,
                password: undefined,
                confirmPassword: undefined,
                code: undefined,
            },
            // 表单激活
            registerFormActive: {
                userName: undefined,
                realName: undefined,
                password: undefined,
                confirmPassword: undefined,
                code: undefined
            },
            // 校验
            registerFormRules: {
                userName: [{
                    required: true,  //表单必填项
                    message: '请输入账号(1-30位中文/英文/数字)',  //提示文字
                    trigger: 'blur', //触发校验的事件
                    pattern: /^[\u4E00-\u9FA5a-zA-Z0-9]{1,30}$/
                },
                ],
                realName: [{
                    required: true,  //表单必填项
                    message: '请输入姓名(2-5)位中文',  //提示文字
                    trigger: 'blur',  //触发校验的事件
                    pattern: /^[\u4E00-\u9FA5]{2,5}$/
                }],
                password: [{
                    required: true,  //表单必填项
                    message: '请输入密码',  //提示文字
                    trigger: 'blur',  //触发校验的事件
                },
                {
                    validator: validatePass,
                    trigger: 'blur'
                }



                ],
                confirmPassword: [{
                    required: true,  //表单必填项
                    trigger: ['blur', 'change'],  //触发校验的事件
                    message: '请输入确认密码',
                },
                {
                    validator: validatePass2,
                    trigger: 'blur'
                }],
                code: [{
                    required: true,  //表单必填项
                    message: '请输入验证码',  //提示文字
                    trigger: 'blur'  //触发校验的事件
                }
                ],


            },
            // 验证码
            captchaImageInfo: {

            },

        }
    },
    created() {
        this.getCaptchaImage()
    },
    methods: {
        registerLabelClick(val) {
            this.$refs[`${val}Ref`].focus()
        },
        // 聚焦
        registerInpotFocus(value) {
            this.registerFormActive[value] = true
        },
        // 失焦
        registerInpotBlur(value) {
            // 判断输入框是否有值
            if (this.registerForm[value]) return
            this.registerFormActive[value] = false
        },
        // 注册
        handleregister() {
            this.$refs['registerFormRef'].validate(valid => {
                console.log(valid)
                // 没有校验成功，不发送ajax
                if (!valid) return
                // 校验成功，发送ajax
                // 解构
                console.log("成功")
                const { uuid } = this.captchaImageInfo
                register({ ...this.registerForm, uuid }).then(res => {
                    console.log(res)
                    this.$message.success(res.msg);
                    // 存token
                    setToken(res.data.token)
                }).catch(err => {
                    // 更新验证码
                    this.getCaptchaImage()
                    console.log(err)
                })

            })
        },
        // 验证码
        getCaptchaImage() {
            captchaImage().then(res => {
                console.log(res)
                this.captchaImageInfo = res.data
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.register {

    width: 100%;
    height: 100vh;
    // 最小高度
    min-height: 800px;
    background-image: url('http://mashang.eicp.vip:5557/student/v3/admin/img/login-bg.d7992b58.jpg');
    background-size: 100% auto;

    .register-content {
        width: 590px;
        height: 100%;
        background-color: #fff;
        border-radius: 50% 0 0 50%;


        .format-content {
            width: 300px;

            .label-row {
                position: relative;



                span {
                    display: inline-block;
                    // em为字节
                    width: 4em;
                    transition: 0.5s;

                    &.label {
                        font-weight: 700;
                        color: #909399;
                        opacity: 1;
                        position: relative;


                        &.active {
                            opacity: 0;
                        }
                    }

                    &.placeholder {
                        position: absolute;
                        top: 50px;
                        z-index: 2;
                        left: 30px;
                        color: hsla(220, 4%, 58%, .533);
                        cursor: text;

                        &.active {
                            top: 0 !important;
                            left: 12px;
                            font-weight: 700;
                            color: #409eff;
                        }
                    }
                }
            }


        }

    }
}
</style>